<!-- 项目编辑弹窗 -->
<template>
    <el-dialog
      :title="isUpdate ? '修改封禁IP' : '添加封禁IP'"
      :visible="visible"
      width="1000px"
      :destroy-on-close="true"
      :lock-scroll="false"
      @update:visible="updateVisible"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="封禁IP:" prop="ip">
          <el-input
            :maxlength="20"
            v-model="form.ip"
            placeholder="请输入封禁IP"
            clearable
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="updateVisible(false)">取消</el-button>
        <el-button type="primary" @click="save" :loading="loading"
          >保存
        </el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
  // import uploadImage from '@/components/uploadImage'
  
  export default {
    name: "AppEdit",
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object
    },
    // components: { uploadImage },
    data() {
      return {
        // 表单数据
        form: Object.assign({ status: 1 }, this.data),
        // 表单验证规则
        rules: {
            ip: [
            { required: true, message: "请输入封禁IP", trigger: "blur" }
          ]
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false
      };
    },
    watch: {
      data() {
        if (this.data) {
          this.form = Object.assign({}, this.data);
          this.isUpdate = true;
        } else {
          this.form = {};
          this.isUpdate = false;
        }
      }
    },
    methods: {
      /* 保存编辑 */
      save() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.loading = true;
            this.$http
              .post("/Sealip/edit", this.form)
              .then(res => {
                this.loading = false;
                if (res.data.code === 0) {
                  this.$message.success(res.data.msg);
                  if (!this.isUpdate) {
                    this.form = {};
                  }
                  this.updateVisible(false);
                  this.$emit("done");
                } else {
                  this.$message.error(res.data.msg);
                }
              })
              .catch(e => {
                this.loading = false;
                this.$message.error(e.message);
              });
          } else {
            return false;
          }
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit("update:visible", value);
      }
    },
  };
  </script>
  
  <style scoped></style>
  